import "./todoList.scss";

import React, { useRef, useState } from "react";

import {
  Button,
  Checkbox,
  Picker,
  Input,
  Text,
  View,
} from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";

export default () => {
  const [visitable, setVisitable] = useState(false);
  const [todoList, setTodoList] = useState([]);
  const [priority, setPriority] = useState("1"); // 优先级
  const $InputRef = useRef();
  useLoad(() => {
    setTodoList(Taro.getStorageSync("todo") || []);
  });
  //定义类型
  const createTodo = (text, priority) => {
    return {
      text,
      checked: false,
      priority: Number(priority), // 存储数字形式的优先级
    };
  };
  //添加按钮
  const addTodo = () => {
    const targetValue = $InputRef.current?.value;
    if (!targetValue) {
      return Taro.showToast({ title: "请先输入~", icon: "none" });
    } else if (todoList.find((todo) => todo.text === targetValue)) {
      return Taro.showToast({ title: "您已添加过该事项~", icon: "none" });
    } else {
      // const newTodoList = [...todoList, createTodo(targetValue)];
      const newTodo = createTodo(targetValue, priority);
      const newTodoList = [...todoList, newTodo].sort(
        (a, b) => a.priority - b.priority
      ); // 添加时就进行排序
      setTodoList(newTodoList);
      Taro.setStorageSync("todo", newTodoList);
      $InputRef.current.value = "";
    }
  };
  //删除按钮
  const handleDeleteClick = () => {
    //分别定义已勾选和未勾选的事项
    const stayTodo = todoList.filter((item) => item.checked === false);
    const removeTodo = todoList.filter((item) => item.checked === true);
    if (removeTodo.length > 0) {
      Taro.showModal({
        title: "确认删除",
        content: "是否确认删除该项？",
        success: function (res) {
          if (res.confirm) {
            setTodoList(stayTodo);
          }
        },
      });
    } else {
      return Taro.showToast({ title: "请选择要删除的待办~", icon: "none" });
    }
  };
  const onChecked = (key) => {
    todoList[key].checked = !todoList[key].checked;
    setTodoList([...todoList]);
    Taro.setStorageSync("todo", todoList);
  };
  // 平台特定功能
  const platformSpecificFeatures = () => {
    if (process.env.TARO_ENV === "weapp") {
      // 微信小程序特有功能
      return <Button openType="share">分享</Button>;
    } else if (process.env.TARO_ENV === "h5") {
      // H5特有功能
      return <Text>在H5环境中使用时，请确保联网以同步数据</Text>;
    }
  };
  return (
    <View style={{ textAlign: "center" }}>
      <View>{platformSpecificFeatures()}</View>
      <Input
        className="todo-input"
        ref={$InputRef}
        placeholder={
          process.env.TARO_ENV === "weapp"
            ? "在这里添加微信小程序的待办事项..."
            : "在这里添加H5平台的待办事项..."
        }
      ></Input>
      <Picker
        mode="selector"
        range={[1, 2, 3]}
        onChange={(e) => setPriority(e.detail.value)}
      >
        <View className="picker">优先级: {priority}</View>
      </Picker>
      <Button className="todo-btn" onClick={addTodo}>
        添加
      </Button>
      <Text className="text">--待办事项--</Text>
      <View className="todo-container">
        {todoList.map((todo, key) => {
          return (
            <View key={key} className="todo-Item">
              <View>
                {/* 具体事项 */}
                <View
                  className="left"
                  onClick={() => {
                    onChecked(key);
                  }}
                >
                  <Checkbox
                    style={{ marginRight: 10 }}
                    checked={todo.checked}
                  />
                  {todo.text} - 优先级: {todo.priority}
                </View>
                <Button className="btn" onClick={handleDeleteClick}>
                  删除
                </Button>
              </View>
              {/* 删除按钮 */}
              <Button className="todo-delete" onClick={handleDeleteClick}>
                删除
              </Button>
            </View>
          );
        })}
      </View>
      <View className="botBackground"></View>
    </View>
  );
};
